<template>
	<view class="container">
		<!-- 加载提示框，初始隐藏，在数据加载时显示 -->
	<!-- 	<view class="custom-loading" v-if="isLoading || !mapFlag">
		    <view class="loading-circle"></view>
		    <view class="loading-text">{{loadingText}}</view>
		</view> -->
		<!-- 图鉴标题 - 传统风格 -->
		<view class="header">
			<image class="header-image" src="/static/img/tuJianJi.png" mode="aspectFit" />
		</view>

		<!-- 书籍列表 - 传统网格布局 -->
		<view class="book-grid">
			<view 
				class="book-card" 
				v-for="(item, index) in booksList" 
				:key="index"
				@click="toBookItem(item.categoryId)"
				:style="{'--delay': index * 0.1 + 's'}"
			>
				<image class="book-cover" :src="item.categoryImg" mode="aspectFill" />
				<view class="book-overlay">
				
				
				</view>
			</view>
		</view>

		<!-- 底部留白 -->
		<!-- <view class="footer-space"></view> -->

		<!-- 底部导航 -->
		<!-- <u-tabbar
			:list="tabBerList"
			active-color="#7C191E"
			inactive-color="#a68a64"
			:border-top="false"
		></u-tabbar> -->
	</view>
</template>


<script>
	import { mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				// // 新增，控制加载提示框显示隐藏
				// isLoading: false,
				// loadingText: '正在加载，请稍候...',
				borderTop: false,
				inactiveColor: '#909399',
				activeColor: '#5098FF',
				booksList: []
			}
		},
		computed: {
			...mapGetters([
				'tabBerList'
			])
		},
		onLoad() {
			this.getBooksList()
		    var self = this;
		    // 显示加载提示框
		    this.isLoading = true;
		    uni.getLocation({
		        type: 'gcj02',
		        success: function (res) {
		            if (res.errMsg == "getLocation:ok") {
		                self.longitude = res.longitude;
		                self.latitude = res.latitude;
		                self.$set(self.markers[0], "longitude", res.longitude);
		                self.$set(self.markers[0], "latitude", res.latitude);
		                self.mapFlag = true;
		                // 获取周边景点信息
		                self.getAroundPoi();
		            }
		        },
		        fail: function (err) {
		            self.showError('获取当前位置失败，请检查权限设置或网络连接', err);
		        },
		        complete: () => {
		            this.isLoading = false;
		        }
		    });
		},
		methods: {
			getBooksList(){
				uni.request({
					url: this.$BASE_URL.baseUrl + '/books/category/list',
					success: (res) => {
						this.booksList = res.data.rows
					}
				})
			},
			toBookItem(id) {
				uni.navigateTo({
					url: '/pages/books/bookList/bookList' + '?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 全局样式 - 传统非遗风格 */
	.container {
	  background-color: #f8f4e9; /* 传统米色背景 */
	  padding: 30rpx 20rpx 120rpx; /* 底部留出tabbar空间 */
	  box-sizing: border-box;
	  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	  /* 移除min-height设置，让高度由内容决定 */
	  display: flex;
	  flex-direction: column;
	}

	/* 非遗图鉴标题 - 传统风格 */
	.header {
		display: flex;
		justify-content: center;
		margin: 60rpx 0 40rpx;
		position: relative;
		
		&-image {
			height: 180rpx;
			object-fit: contain;
			filter: drop-shadow(2rpx 4rpx 8rpx rgba(124, 25, 30, 0.3));
			position: relative;
			z-index: 2;
		}
		
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			width: 20%;
			height: 2rpx;
			background: linear-gradient(90deg, 
				transparent 0%, 
				#7C191E 20%, 
				#7C191E 80%, 
				transparent 100%);
		}
		
		&::before {
			left: 5%;
		}
		
		&::after {
			right: 5%;
		}
	}

/* 非遗书籍网格 - 传统布局 */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320rpx, 1fr));
  gap: 30rpx;
  padding: 0 20rpx;
  /* 添加自动增长以适应内容 */
  flex-grow: 1;
}

	/* 非遗书籍卡片 - 传统风格 */
	.book-card {
		width: 100%;
		aspect-ratio: 3/4;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 
			0 8rpx 24rpx rgba(124, 25, 30, 0.1),
			0 2rpx 4rpx rgba(124, 25, 30, 0.05);
		transition: all 0.3s ease;
		background-color: #fff;
		animation: fadeInUp 0.6s ease-out forwards;
		opacity: 0;
		animation-delay: var(--delay);
		
		&:active {
			transform: translateY(8rpx) scale(0.98);
			box-shadow: 
				0 4rpx 12rpx rgba(124, 25, 30, 0.1),
				0 1rpx 2rpx rgba(124, 25, 30, 0.05);
		}
	}

	.book-cover {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}

	/* 书籍装饰层 - 传统元素 */
	.book-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(180deg, 
			rgba(255, 255, 255, 0) 60%, 
			rgba(124, 25, 30, 0.7) 100%);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 20rpx;
		box-sizing: border-box;
		
		.book-title {
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			margin-bottom: 10rpx;
		}
	}


	/* 动画效果 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	// /* 底部留白 */
	// .footer-space {
	// 	height: 40rpx;
	// }

	/* 响应式调整 */
	@media (max-width: 600rpx) {
		.container {
			padding: 20rpx 15rpx 120rpx;
		}
		
		.header {
			margin: 40rpx 0 30rpx;
			
			&-image {
				height: 150rpx;
			}
			
			&::before,
			&::after {
				width: 15%;
			}
		}
		
		.book-grid {
			grid-template-columns: 1fr;
			gap: 25rpx;
			max-width: 500rpx;
			margin: 0 auto;
		}
	}
</style>